<template>
  <div :class="cname" class="am-input-group date">
    <span class="am-input-group-label am-kai">{{title}}</span>
    <input class="am-form-field" size="16" type="text" placeholder="请填写" :required="required" readonly>
    <span class="am-input-group-label add-on"><i @click="clear" class="icon-remove am-icon-close"></i></span>
    <span class="am-input-group-label add-on"><i class="icon-th am-icon-calendar"></i></span>
  </div>
</template>

<script>
  export default {
    name: 'FormTimeInput',
    props: {
      value: [String, Number],
      cname: {
        type: String,
        required: true
      },
      title: {
        type: String,
        required: true
      },
      required: [String, Boolean]
    },
    data() {
      return {
        time: '',
      }
    },
    created() {
       let _this = this
      this.$nextTick(() => {
        $('.'+ _this.cname).datetimepicker({
          language: 'zh-CN',
          showMeridian: true,
          autoclose: true,
          todayBtn: true
        })
      })
    },
    mounted() {
      let _this = this
      
      this.$nextTick(() => {
        $('.'+ _this.cname).on('changeDate', function (ev) {
          _this.time = ev.date.valueOf()
        })

        _this.value && !isNaN(new Date(_this.value).getTime()) && $('.'+ _this.cname).datetimepicker('update', new Date(_this.value))
      })
    },
    watch: {
      time(val) {
        this.$emit('input', val)
      },
      value (val) {
        val&& !isNaN(new Date(val).getTime()) && $('.'+ this.cname).datetimepicker('update', new Date(val))
      }
    },
    methods: {
      clear () {
        this.$emit('input', '')
      }
    }
  }

</script>